<template>
  <cjui-page-panel header="Personal Info">
    <div class="profile-other-msg">
      <small class="text-muted">{{ $t('profile.user.nickname') }}</small>
      <h6>{{ replaceEmpty(userStore.userProfile.nickname) }}</h6>
      <small class="text-muted">{{ $t('profile.user.email') }}</small>
      <h6>{{ replaceEmpty(userStore.userProfile.email) }}</h6>
      <small class="text-muted">{{ $t('profile.user.mobile') }}</small>
      <h6>{{ replaceEmpty(userStore.userProfile.mobile) }}</h6>
      <small class="text-muted">{{ $t('profile.user.dept') }}</small>
      <h6>{{ replaceEmpty(userStore.userProfile.deptName) }}</h6>
      <small class="text-muted">{{ $t('profile.user.posts') }}</small>
      <h6>{{ handleArrToStr(userStore.userProfile.posts, 'name') }}</h6>
      <small class="text-muted">{{ $t('profile.user.roles') }}</small>
      <h6>{{ handleArrToStr(userStore.userProfile.roles, 'name') }}</h6>
      <small class="text-muted">{{ $t('profile.user.createTime') }}</small>
      <h6>{{ userStore.userProfile.createTime }}</h6>
    </div>
  </cjui-page-panel>
</template>
<script lang="ts" name="ProfileUser" setup>
import { replaceEmpty, handleArrToStr } from '@/utils/basic-common/valueHandle'
import { useUserStore } from '@/store/modules/user'

const userStore = useUserStore()
</script>

<style lang="scss" scoped>
.cjui-divider {
  margin-bottom: 0;
}

.profile-other-msg {
  color: var(--el-text-color-regular);

  .text-muted {
    font-size: 80%;
    font-weight: 400;
    color: var(--el-text-color-placeholder) !important;

    &:not(:first-child) {
      display: block;
      padding-top: 24px;
    }
  }

  h6 {
    margin: 4px 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
  }
}

.list-group-striped > .list-group-item {
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
  border-left: 0;
  border-radius: 0;
}

.list-group {
  padding-left: 0;
  list-style: none;
}

.list-group-item {
  padding: 11px 0;
  margin-bottom: -1px;
  font-size: 13px;
  border-top: 1px solid #e7eaec;
  border-bottom: 1px solid #e7eaec;
}

.pull-right {
  float: right !important;
}
</style>
